Conversation
|
Hey @ftp27 , thanks a lot for the PR :) I had a look at the example application, and somehow the animation looks a bit weird. The gradient doesn't look like it's rotating along the path. If you need help with this, just let me know 👍 |
|
@fxm90 It does look weird indeed but there is a reason: the centre of the circle gradient is in the top left corner of View. I tried putting it into the centre but due to the abrupt change of colour (purple to green), it looks strange. So I decided to make it unfold like a fan not to meddle with how gradient forms, that's why it might look weird to you. Any thoughts about that? |
|
@ftp27 Okay, got your point 👍 I'll try to review your PR this weekend :) |
GradientLoadingBar/Classes/Views/GradientActivityIndicatorView.swift
Outdated
Show resolved
Hide resolved
GradientLoadingBar/Classes/Views/RoundedGradientActivityIndicatorView.swift
Outdated
Show resolved
Hide resolved
GradientLoadingBar/Classes/Views/RoundedGradientActivityIndicatorView.swift
Outdated
Show resolved
Hide resolved
GradientLoadingBar/Classes/Views/RoundedGradientActivityIndicatorView.swift
Show resolved
Hide resolved
GradientLoadingBar/Classes/Views/RoundedGradientActivityIndicatorView.swift
Show resolved
Hide resolved
| prevoiusRect = newRect | ||
| cornerRadius = newRadius | ||
| let rectPath = UIBezierPath(roundedRect: bounds, cornerRadius: 0) | ||
| let circlePath = UIBezierPath(roundedRect: newRect, cornerRadius: cornerRadius) |
There was a problem hiding this comment.
Could this also be achieved with a single UIBezierPath by applying a lineWidth to the CAShapeLayer?
E.g. something like this:
let roundedRect = bounds.insetBy(dx: borderWidth / 2, dy: borderWidth / 2)
let shapeLayer = CAShapeLayer()
shapeLayer.path = UIBezierPath(roundedRect: roundedRect, cornerRadius: superview?.layer.cornerRadius ?? 0).cgPath
shapeLayer.lineWidth = lineWidth
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.black.cgColor
gradientLayer?.mask = shapeLayerThere was a problem hiding this comment.
Furthermore it might be easier to set this up once in commonInit(), so we don't need the guard statement above. We could then keep a reference to the shape-layer, so we update only the path in layoutSubviews().
There was a problem hiding this comment.
Have you tried it? It's a shape mask. I don't think it will work
There was a problem hiding this comment.
Needs a bit of cleanup, but this is what I basically thought of:
open class RoundedGradientActivityIndicatorView: GradientActivityIndicatorView {
// MARK: - Public properties
var lineWidth: CGFloat = 8
// MARK: - Private properties
private let shapeLayer = CAShapeLayer()
// MARK: - Initializer
override public init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
public required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
// MARK: - Public methods
override open func layoutSubviews() {
super.layoutSubviews()
let offset = lineWidth / 2
let roundedRect = bounds.inset(by: UIEdgeInsets(top: offset, left: offset, bottom: offset, right: offset))
shapeLayer.path = UIBezierPath(roundedRect: roundedRect, cornerRadius: superview?.layer.cornerRadius ?? 0).cgPath
}
// MARK: - Private methods
private func commonInit() {
shapeLayer.lineWidth = lineWidth
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.black.cgColor
gradientLayer?.mask = shapeLayer
if #available(iOS 12.0, *) {
gradientLayer?.type = .conic
}
}
}
|
There is a small animation glitch in case you remove the border from the button. You can see a separate color on the top of the circle. E.g. with
|
|
@fxm90 Please show me an example of the code with the glitch. |
I commented out these lines in // layer.borderColor = UIColor.CustomColors.blue.cgColor
// layer.borderWidth = 1.0I applied some "easer to see" colors in cirlceGradientActivityIndicatorView.gradientColors = [.red, .yellow, .green]And finally increased the border width inside public var borderWidth: CGFloat = 10 |
2 participants
Just simple improvement to make an indicator stick to borders of a superview.